<template>
    <div :class="`tech-special ${mode}`" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <div class="special-top-container">
            <ShopDesc v-if="storeInfo" :shopInfo="storeInfo" />
            <template v-for="item in contenList">
                <SpecialAd v-if="item.moduleName === 'banner'" :key="item.moduleName" :bannerList="item.bannerList" :storeId="storeInfo.id" />
                <SpecialActivity v-if="item.moduleName === 'activity'" :key="item.moduleName" />
            </template>
        </div>
        <Tabs v-model="active" sticky class="menu-tabs" @scroll="handleTabScroll">
            <Tab title="商品列表">
                <SpecialList :isFixed="isFixed" />
            </Tab>
            <Tab title="其他"></Tab>
        </Tabs>
        <!-- <Bag :isSingle="true" :mode="mode" :styleMode="styleMode" :theme="theme" /> -->
    </div>
</template>

<script>
import { Tabs, Tab } from 'vant';
import { mapState, mapActions } from 'vuex';
import ShopDesc from './special/ShopDesc';
import GoodsItem from './components/GoodsItem';
import SpecialList from './special/SpecialList';
import SpecialAd from './special/SpecialAd';
import SpecialActivity from './special/SpecialActivity';
import Bag from './bag/Bag';

import { setTitle } from '@common/utils';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
import logger from '@common/logger';
import { ClearTip, TipLoading } from '@common/tip';

export default {
    name: 'Special', // 专场
    components: {
        ShopDesc,
        GoodsItem,
        Bag,
        Tabs,
        Tab,
        SpecialList,
        SpecialAd,
        SpecialActivity,
    },
    data() {
        return {
            active: 0,
            isFixed: false,
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    computed: {
        ...mapState({
            storeInfo: state => state.special.storeInfo,
            categoryList: state => state.special.categoryList,
            shelfList: state => state.special.shelfList,
            contenList: state => state.special.contenList,
        }),
        isBrandMode() {
            return this.storeInfo.id === 0;
        },
    },
    async created() {
        const { storeId } = this.$route.params;
        logger.debugger('Special => 当前门店id', storeId);
        setTitle('专场');
        TipLoading('加载中...');
        await this.getStoreConfig(storeId);
        await this.getStoreCategory(storeId);
        await this.getGoodsDiscountInfo();
        ClearTip();
    },
    mounted() {
        const pageElement = document.querySelector('.tech-special');
        pageElement.addEventListener('touchmove', () => {
            const el = document.querySelector('.van-tabs__wrap');
            const y = pageElement.scrollTop;
            if (y >= 205) {
                el.style = 'position: fixed; top: 0;';
            } else {
                el.style = '';
            }
        });
        window.addEventListener('popstate', function(event) {});
    },
    methods: {
        ...mapActions([
            'getStoreConfig',
            'getStoreCategory',
            'getStoreShelfNext',
            'getGoodsDiscountInfo',
        ]),
        handleTabScroll({ scrollTop, isFixed }) {
            this.isFixed = isFixed;
        },
        handleTouchStart(e) {
            const { changedTouches } = e;
            this.startY = changedTouches[0].pageY;
        },
        async handleTouchEnd(e) {
            const { changedTouches } = e;
            this.endY = changedTouches[0].pageY;
            const elements = document.querySelector('.tech-special');
            let clientHeight = elements.clientHeight;
            let scrollHeight = elements.scrollHeight;
            let scrollTop = elements.scrollTop;
            let isBottom = clientHeight + scrollTop > scrollHeight - 30;
            if (this.startY - this.endY > 30) {
                isBottom && await this.getStoreShelfNext();
            }
        },
    },
};
</script>

<style lang="less">
.tech-special {
    .mode-white();
    height: 100vh;
    overflow-x: hidden;
    .shop-column {
        .container-content {
            .p-l(@shop-gap-md);
        }
    }
    .menu-tabs {
        .p-t(0);
        .van-tabs__wrap {
            display: none;
        }
        .menu-list.menu-list-fixed .menu-list-container .goods-type-container {
            top: 0;
        }
        .van-hairline--top-bottom::after {
            border-width: 0;
        }
    }
}
</style>
